<template>
  <!-- 营家好店 -->
  <div class="goodshop">
    <div class="title">
      {{ data.name }}
    </div>
    <div v-if="ShopLienth === 1 || ShopLienth === 2">
      <div
        v-for="(shop, index) in list"
        :key="index"
      >
        <div class="goods-list">
          <!-- {{ ShopLienth}} -->
          <div 
            class="goods-list-itme shop-box" 
            style="margin-left: 0;"
          >
            <div class="logo">
              <img
                :src="shop.detail.cLogoUrl"
                :alt="shop.detail.cShopShowName"
                class="logo-img"
              >
            </div>
            <div class="shop-name">
              {{ shop.detail.cShopShowName }}
            </div>
            <div
              v-if="shop.detail.iType != 'undefined'"
              class="shop-type"
            >
              {{ shop.detail.iType === 1 ? "自营" : "非自营" }}
            </div>
            <div class="shop-status">
              <!-- {{ shop.detail.bCorpStore }}人已关注 -->
              {{ shop.watchNum }}人已关注
            </div>
            <div
              class="shop-button"
              @click="GotoShop(shop.detail)"
            >
              进店
            </div>
          </div>
          <div
            v-for="(goods, index) in shop.goods.data"
            :key="index"
          >
            <div
              v-if="index < 4"
              class="goods-list-itme"
            >
              <div
                class="goods-box"
                @click="toBuy(goods.pid, goods)"
              >
                <img
                  :src="goods.defaultAlbum"
                  :alt="goods.cProductShowName"
                  class="goods-img"
                >
                <p class="name">
                  {{ goods.cProductShowName }}
                </p>
                <p class="price">
                  ￥ {{ goods.fSalePrice }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 当有三个个店铺时 -->
    <div v-if="ShopLienth === 3">
      <!--第一块-->
      <div class="goods-list">
        <div class="goods-list-itme shop-box">
          <div class="logo">
            <img
              :src="list[0].detail.cLogoUrl"
              :alt="list[0].detail.cShopShowName"
              class="logo-img"
            >
          </div>
          <div class="shop-name">
            {{ list[0].detail.cShopShowName }}
          </div>
          <div
            v-if="list[0].detail.iType != 'undefined'"
            class="shop-type"
          >
            {{ list[0].detail.iType === 1 ? "自营" : "非自营" }}
          </div>
          <div class="shop-status">
            <!-- {{ list[0].detail.bCorpStore }}人已关注 -->
            {{ list[0].watchNum }}人已关注
          </div>
          <div
            class="shop-button"
            @click="GotoShop(list[0].detail)"
          >
            进店
          </div>
        </div>

        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[0].goods.data[0].pid, list[0].goods.data[0])"
          >
            <img
              :src="list[0].goods.data[0].defaultAlbum"
              :alt="list[0].goods.data[0].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[0].goods.data[0].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[0].goods.data[0].fSalePrice }}
            </p>
          </div>
        </div>
        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[0].goods.data[1].pid, list[0].goods.data[1])"
          >
            <img
              :src="list[0].goods.data[1].defaultAlbum"
              :alt="list[0].goods.data[1].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[0].goods.data[1].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[0].goods.data[1].fSalePrice }}
            </p>
          </div>
        </div>
        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[0].goods.data[2].pid, list[0].goods.data[2])"
          >
            <img
              :src="list[0].goods.data[2].defaultAlbum"
              :alt="list[0].goods.data[2].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[0].goods.data[2].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[0].goods.data[2].fSalePrice }}
            </p>
          </div>
        </div>
        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[0].goods.data[3].pid, list[0].goods.data[3])"
          >
            <img
              :src="list[0].goods.data[3].defaultAlbum"
              :alt="list[0].goods.data[3].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[0].goods.data[3].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[0].goods.data[3].fSalePrice }}
            </p>
          </div>
        </div>
      </div>
      <!--第一块END-->
      <!--第二块-->
      <div class="goods-list">
        <div class="goods-list-itme shop-box">
          <div class="logo">
            <img
              :src="list[1].detail.cLogoUrl"
              :alt="list[1].detail.cShopShowName"
              class="logo-img"
            >
          </div>
          <div class="shop-name">
            {{ list[1].detail.cShopShowName }}
          </div>
          <div
            v-if="list[1].detail.iType != 'undefined'"
            class="shop-type"
          >
            {{ list[1].detail.iType === 1 ? "自营" : "非自营" }}
          </div>
          <div class="shop-status">
            <!-- {{ list[1].detail.bCorpStore }}人已关注 -->
            {{ list[1].watchNum }}人已关注
          </div>
          <div
            class="shop-button"
            @click="GotoShop(list[1].detail)"
          >
            进店
          </div>
        </div>

        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[1].goods.data[0].pid, list[1].goods.data[0])"
          >
            <img
              :src="list[1].goods.data[0].defaultAlbum"
              :alt="list[1].goods.data[0].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[1].goods.data[0].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[1].goods.data[0].fSalePrice }}
            </p>
          </div>
        </div>
        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[1].goods.data[1].pid, list[1].goods.data[1])"
          >
            <img
              :src="list[1].goods.data[1].defaultAlbum"
              :alt="list[1].goods.data[1].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[1].goods.data[1].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[1].goods.data[1].fSalePrice }}
            </p>
          </div>
        </div>

        <div class="goods-list-itme shop-box margin-left-style">
          <div class="logo">
            <img
              :src="list[2].detail.cLogoUrl"
              :alt="list[2].detail.cShopShowName"
              class="logo-img"
            >
          </div>
          <div class="shop-name">
            {{ list[2].detail.cShopShowName }}
          </div>
          <div
            v-if="list[2].detail.iType != 'undefined'"
            class="shop-type"
          >
            {{ list[2].detail.iType === 1 ? "自营" : "非自营" }}
          </div>
          <div class="shop-status">
            <!-- {{ list[2].detail.bCorpStore }}人已关注 -->
            {{ list[2].watchNum }}人已关注
          </div>
          <div
            class="shop-button"
            @click="GotoShop(list[2].detail)"
          >
            进店
          </div>
        </div>

        <div class="goods-list-itme">
          <div
            class="goods-box"
            @click="toBuy(list[2].goods.data[0].pid, list[2].goods.data[0])"
          >
            <img
              :src="list[2].goods.data[0].defaultAlbum"
              :alt="list[2].goods.data[0].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[2].goods.data[0].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[2].goods.data[0].fSalePrice }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 当有三个个店铺时END -->

    <!-- 当有四个店铺时 -->
    <div v-if="ShopLienth === 4">
      <!--第一块-->
      <div class="goods-list">
        <div class="goods-list-itme shop-box">
          <div class="logo">
            <img
              :src="list[0].detail.cLogoUrl"
              :alt="list[0].detail.cShopShowName"
              class="logo-img"
            >
          </div>
          <div class="shop-name">
            {{ list[0].detail.cShopShowName }}
          </div>
          <div
            v-if="list[0].detail.iType != 'undefined'"
            class="shop-type"
          >
            {{ list[0].detail.iType === 1 ? "自营" : "非自营" }}
          </div>
          <div class="shop-status">
            <!-- {{ list[0].detail.bCorpStore }}人已关注 -->
            {{ list[0].watchNum }}人已关注
          </div>
          <div
            class="shop-button"
            @click="GotoShop(list[0].detail)"
          >
            进店
          </div>
        </div>

        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[0].goods.data[0].pid, list[0].goods.data[0])"
          >
            <img
              :src="list[0].goods.data[0].defaultAlbum"
              :alt="list[0].goods.data[0].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[0].goods.data[0].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[0].goods.data[0].fSalePrice }}
            </p>
          </div>
        </div>
        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[0].goods.data[1].pid, list[0].goods.data[1])"
          >
            <img
              :src="list[0].goods.data[1].defaultAlbum"
              :alt="list[0].goods.data[1].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[0].goods.data[1].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[0].goods.data[1].fSalePrice }}
            </p>
          </div>
        </div>

        <div class="goods-list-itme shop-box margin-left-style">
          <div class="logo">
            <img
              :src="list[1].detail.cLogoUrl"
              :alt="list[1].detail.cShopShowName"
              class="logo-img"
            >
          </div>
          <div class="shop-name">
            {{ list[1].detail.cShopShowName }}
          </div>
          <div
            v-if="list[1].detail.iType != 'undefined'"
            class="shop-type"
          >
            {{ list[1].detail.iType === 1 ? "自营" : "非自营" }}
          </div>
          <div class="shop-status">
            <!-- {{ list[1].detail.bCorpStore }}人已关注 -->
            {{ list[1].watchNum }}人已关注
          </div>
          <div
            class="shop-button"
            @click="GotoShop(list[1].detail)"
          >
            进店
          </div>
        </div>

        <div class="goods-list-itme">
          <div
            class="goods-box"
            @click="toBuy(list[1].goods.data[0].pid, list[1].goods.data[0])"
          >
            <img
              :src="list[1].goods.data[0].defaultAlbum"
              :alt="list[1].goods.data[0].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[1].goods.data[0].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[1].goods.data[0].fSalePrice }}
            </p>
          </div>
        </div>
      </div>
      <!--第一块END-->
      <!--第二块-->
      <div class="goods-list">
        <div class="goods-list-itme shop-box">
          <div class="logo">
            <img
              :src="list[2].detail.cLogoUrl"
              :alt="list[2].detail.cShopShowName"
              class="logo-img"
            >
          </div>
          <div class="shop-name">
            {{ list[2].detail.cShopShowName }}
          </div>
          <div
            v-if="list[2].detail.iType != 'undefined'"
            class="shop-type"
          >
            {{ list[2].detail.iType === 1 ? "自营" : "非自营" }}
          </div>
          <div class="shop-status">
            <!-- {{ list[2].detail.bCorpStore }}人已关注 -->
            {{ list[2].watchNum }}人已关注
          </div>
          <div
            class="shop-button"
            @click="GotoShop(list[2].detail)"
          >
            进店
          </div>
        </div>

        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[2].goods.data[0].pid, list[2].goods.data[0])"
          >
            <img
              :src="list[2].goods.data[0].defaultAlbum"
              :alt="list[2].goods.data[0].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[2].goods.data[0].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[2].goods.data[0].fSalePrice }}
            </p>
          </div>
        </div>
        <div class="goods-list-itme margin-left-style">
          <div
            class="goods-box"
            @click="toBuy(list[2].goods.data[1].pid, list[2].goods.data[1])"
          >
            <img
              :src="list[2].goods.data[1].defaultAlbum"
              :alt="list[2].goods.data[1].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[2].goods.data[1].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[2].goods.data[1].fSalePrice }}
            </p>
          </div>
        </div>

        <div class="goods-list-itme shop-box margin-left-style">
          <div class="logo">
            <img
              :src="list[3].detail.cLogoUrl"
              :alt="list[3].detail.cShopShowName"
              class="logo-img"
            >
          </div>
          <div class="shop-name">
            {{ list[3].detail.cShopShowName }}
          </div>
          <div
            v-if="list[3].detail.iType != 'undefined'"
            class="shop-type"
          >
            {{ list[3].detail.iType === 1 ? "自营" : "非自营" }}
          </div>
          <div class="shop-status">
            <!-- {{ list[3].detail.bCorpStore }}人已关注 -->
            {{ list[3].watchNum }} 人已关注
          </div>
          <div
            class="shop-button"
            @click="GotoShop(list[3].detail)"
          >
            进店
          </div>
        </div>

        <div class="goods-list-itme">
          <div
            class="goods-box"
            @click="toBuy(list[3].goods.data[0].pid, list[3].goods.data[0])"
          >
            <img
              :src="list[3].goods.data[0].defaultAlbum"
              :alt="list[3].goods.data[0].cProductShowName"
              class="goods-img"
            >
            <p class="name">
              {{ list[3].goods.data[0].cProductShowName }}
            </p>
            <p class="price">
              ￥ {{ list[3].goods.data[0].fSalePrice }}
            </p>
          </div>
        </div>
      </div>
      <!--第二块END-->
    </div>
    <!-- 当有四个店铺时END -->
    <div class="more">
      <img
        src="../../assets/img/logo2.png"
        alt=""
        @click="toList"
      >
    </div>
    <!-- u鲜广告 -->
    <img
      src="../../assets/img/7@2x.png"
      alt=""
      class="adv"
    >
  </div>
</template>

<script>
import bus from "@/api/eventBus";
export default {
  name: "",
  components: {},
  props: {
    data: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      list: [],
      ShopLienth: "",
      SHOPOBJDATA: {},
      loading: true,
      totalCount: "",
    };
  },
  computed: {},
  mounted() {
    this.GetData();
    // this.GetShopFavoritesData()
  },
  methods: {
    FocusNum(id) {
      console.log("FocusNum计算", id);
      // this.GetShopFavoritesData(id)
      return this.GetShopFavoritesData(id);
    },
    GetData() {
      let params = {
        shop_ids: this.data.connect_id,
      };
      this.$api.commit.IndexShops(params).then((res) => {
        console.log("获取营家好店列表", res.data);
        this.list = res.data;
        this.ShopLienth = res.data.length;
        this.loading = false;
        this.list.forEach((item) => {
          this.GetShopFavoritesData(item.shop_id);
        });
      });
    },
    toBuy(item, toBuy) {
      console.log("商品详情", item, toBuy);
      this.$router.push({ 
        path: "/fruit/detail?id=" + item + '&iShopId=' + toBuy.iShopId });
    },
    // 更多
    toList() {
      this.$router.push({
        path: "/shopclass",
      });
    },
    // 进店
    GotoShop(GotoShop) {
      console.log("进店", GotoShop);
      bus.$emit("GotoShopOBJData", GotoShop);
      localStorage.setItem("refresh", true);
      this.$router.push({
        path: "/shopindex?id=" + GotoShop.id,
      });
      sessionStorage.setItem("ShopID", GotoShop.id)
      sessionStorage.setItem("ShopActiveIndex", '')
    },
    // 关注人数
    GetShopFavoritesData(iShopId) {
      let params = {
        token: localStorage.getItem("token"),
        id: iShopId,
      };
      this.$api.commit.getFavoriteCount(params).then((res) => {
        console.log("关注人数res", res);
        if (res.code === 200) {
          // console.log('this.关注人数', res.data.pager.totalCount)
          this.totalCount = res.data;
          this.list.forEach((item) => {
            if (iShopId == item.shop_id) {
              this.$set(item, "watchNum", res.data);
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.goodshop {
  padding: 0 10rem;
  margin-top: 2.19rem;
  display: flex;
  flex-direction: column;

  .title {
    width: 11.25rem;
    height: 3.44rem;
    background: rgba(0, 0, 0, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(234, 234, 234, 1);
  }

  .goods-list {
    margin-top: 1.88rem;
    width: 100%;
    display: flex;
    // justify-content: space-between;
    justify-content: flex-start;
    align-items: center;
    .margin-left-style {
      margin-left: 1.2rem !important;
    }
    .goods-list-itme {
      width: 16.5rem;
      margin-left: 1.2rem;
      height: 25rem;
      display: flex;
      background: white;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .goods-box {
        background: white;
      }
      .goods-img {
        width: 15rem;
        height: 15rem;
        margin: 0 auto;
        text-align: center;
      }
      .name {
        font-size: 1.13rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #040000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 15rem;
        margin-top: 0.94rem;
        text-align: center;
      }
      .price {
        font-size: 1.5rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3406f;
        margin-top: 0.94rem;
        width: 15rem;
        text-align: center;
      }
    }
    .goods-list-itme:not(:last-of-type) {
      margin-left: 0;
    }

    .shop-box {
      background: #00dea9;
      flex-direction: column;
      color: white;
      font-weight: 400;
      .logo-img {
        background: white;
        width: 7rem;
        height: 7rem;
        border-radius: 100%;
        text-align: center;
        line-height: 7rem;
      }
      .shop-name {
        font-size: 1.5rem;
        padding: 1rem 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 16.5rem;
        text-align: center;
      }
      .shop-type {
        font-size: 0.8rem;
        line-height: 1.5rem;
        border-top: white 0.1rem solid;
        border-bottom: white 0.1rem solid;
        width: 4rem;
        text-align: center;
      }
      .shop-status {
        font-size: 1rem;
        line-height: 2.8rem;
      }
      .shop-button {
        background: white;
        width: 12rem;
        height: 2rem;
        margin-top: 2rem;
        text-align: center;
        color: #18c4a6;
        line-height: 2rem;
      }
    }
  }

  .more {
    height: 2.5rem;
    background: rgba(0, 0, 0, 1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 1.44rem;
    margin-top: 1.88rem;
    img {
      width: 7.38rem;
      cursor: pointer;
    }
  }

  .adv {
    width: 100%;
    margin-top: 3.69rem;
    object-fit: contain;
  }
}
</style>
